<template>
    <el-form ref="form" :model="user" :rules="rules" label-width="80px">
        <el-form-item label="用户昵称" prop="loginName">
            <el-input v-model="user.loginName"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="workPhone">
            <el-input v-model="user.workPhone" maxlength="11"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="workEmail">
            <el-input v-model="user.workEmail" maxlength="50"/>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="user.sex">
                <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
                    v-model="user.birthday"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择出生日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
            <el-input v-model="user.address" placeholder="请输入家庭住址"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="mini" @click="submit">保存</el-button>
            <el-button type="danger" size="mini" @click="close">关闭</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {updateUserProfile} from "@/api/system/user";

    export default {
        props: {
            user: {
                type: Object
            }
        },
        data() {
            return {
                // 表单校验
                rules: {
                    workEmail: [
                        {
                            type: "email",
                            message: "'请输入正确的邮箱地址",
                            trigger: ["blur", "change"]
                        }
                    ],
                    workPhone: [
                        {
                            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                            message: "请输入正确的手机号码",
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        methods: {
            submit() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        updateUserProfile(this.user).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess("修改成功");
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                });
            },
            close() {
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.push({path: "/index"});
            }
        }
    };
</script>
